<template>
  <view>
    <view class="navbar" v-show="isExpirec == 'true'">
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="nav-item"
        :class="{ current: tabCurrentIndex === item.key }"
        @click="tabClick(item.key)"
        v-show="isExpirec"
      >
        {{ item.text }}
      </view>
    </view>
    <uni-card v-show="tabCurrentIndex == 'info' && isExpirec == 'true'">
      <uni-forms
        ref="formRef"
        label-position="top"
        :model="formData"
        label-width="100vw"
      >
        <uni-forms-item
          :rules="[
            {
              required: true,
              errorMessage: '字段为必填项',
            },
          ]"
          required
          label="变更后监护人姓名"
          name="guarName"
        >
          <uni-easyinput
            :style="{
              border: 'none',
            }"
            type="text"
            v-model="formData.guarName"
          />
        </uni-forms-item>

        <uni-forms-item
          :rules="[
            {
              required: true,
              errorMessage: '字段为必填项',
            },
          ]"
          required
          label="签字"
          name="fileUrl"
        >
          <Qianming
            v-model="formData.fileUrl"
            canvasId="fileUrl"
            :open="openQm"
          ></Qianming>
        </uni-forms-item>
      </uni-forms>
      <button type="primary" class="submit" @click="submitForm">提 交</button>
    </uni-card>
    <view
      class="container"
      v-show="tabCurrentIndex == 'qtjc' || isExpirec != 'true'"
      style="padding: 5px 0 11vw"
    >
      <Table ref="table" :fetchData="fetchData" :autoFetch="false">
        <template #default="{ data }">
          <view v-for="item in data">
            <uni-card>
              <view class="uni-body">
                <view class="item">
                  <view class="list-item">
                    <view class="label"> 监护人： </view>
                    <view class="value">
                      {{ item.guarName }}
                    </view>
                  </view>
                  <view class="list-item">
                    <view class="label"> 变更时间： </view>
                    <view class="value">
                      {{ item.createdDate }}
                    </view>
                  </view>

                  <view class="list-item">
                    <view class="label"> 签字： </view>
                    <view class="value">
                      <image
                        class="img"
                        :src="formatSrc(item.fileUrl)"
                        style="height: 150upx; width: 400upx"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </uni-card>
          </view>
        </template>
      </Table>
    </view>
    <catSignature
      :canvasId="cId + ''"
      @close="closeQm"
      @save="saveQm"
      :visible="true"
      v-if="showQm"
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
      pid: null,
      isExpire: false,
    };
  },
  onLoad(payload) {
    this.pid = payload.pid;
    this.isExpire = payload.isExpire;
  },
};
</script>
<script setup>
import { onMounted, ref, getCurrentInstance, computed } from "vue";
import { bgjhr as APIS } from "@/api/zygl/zyjh.js";
import Qianming from "./qianming.vue";
import { apis } from "@/api/zygl/zyp";
import { router } from "@/router/index.js";
import catSignature from "@/components/cat-signature.vue";
import { formatDate } from "@/utils/index.js";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { formatSrc } from "@/utils/index.js";

const filterForm = ref({});
const table = ref();

const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS,
  filterForm: filterForm.value,
});
// 签字相关逻辑
const showQm = ref(false);
const example = ref(null);
const cId = ref(2112);
const openQm = (e) => {
  cId.value = Date.now();
  showQm.value = true;
  example.value = e;
};
const closeQm = () => {
  showQm.value = false;
};
const saveQm = (val) => {
  closeQm();
  example.value.exposed.save(val);
};
// _______________________
const navList = ref([
  { text: "变更监护人", key: "info" },
  { text: "变更记录", key: "qtjc" },
]);
const tabCurrentIndex = ref("info");
const tabClick = (key) => {
  tabCurrentIndex.value = key;
};

const formRef = ref();
const submitForm = async () => {
  const data = await formRef.value.validate();
  APIS.add(formData.value).then((res) => {
    router.back();
  });
};
const formData = ref({});
const isExpirec = ref(false);
onMounted(() => {
  const { pid, isExpire } = getCurrentInstance().data;
  isExpirec.value = isExpire;
  console.log(isExpirec.value === "false");
  filterForm.value.pid = pid;
  formData.value.pid = pid;
  getList();
});
</script>

<style lang="scss" scoped>
.input-num {
  display: inline-block;
  width: 50px;
  border: none;
  border-bottom: 1px solid #000;
  font-size: 13px;
  padding: 0 !important;
  vertical-align: middle;
}
.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    position: relative;

    &.current {
      color: blue;

      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 44px;
        height: 0;
        // border-bottom: 2px solid $base-color;
      }
    }
  }
}
.botton-btm {
  height: 11vw;
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: space-around;
}

.list-item {
  display: flex;
  padding: 10upx 30upx;
  .value {
    width: 450upx;
  }
  .label {
    width: 200upx;
    margin-right: 20upx;
  }
}
</style>
